<template>
  <div>
    <div style="" >
      <div style="margin: 10px">
        <el-button type="primary" @click="do_create">添加</el-button>
      </div>
      <div style="margin: 10px">
        <el-input v-model="queryData.data.id" placeholder="请输入课序号查询" style="width: 20%" clearable></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="do_query">查询</el-button>
      </div>

    </div>
    <el-table
        :data="tableData"
        border
        style="width: 100%; height: 400px">
      <el-table-column
          prop="id"
          label="课序号"
          >
      </el-table-column>
      <el-table-column
          prop="courseName"
          label="课程名称"
          >
      </el-table-column>
      <el-table-column
          prop="book"
          label="选用教材">
      </el-table-column>
      <el-table-column
          prop="teacher.id"
          label="教师工号">
      </el-table-column>
      <el-table-column
          prop="teacher.teacherName"
          label="教师姓名">
      </el-table-column>
      <el-table-column
          prop="credit"
          label="学分">
      </el-table-column>
      <el-table-column
          prop="courseInfo"
          label="课程信息"
          width="180">
      </el-table-column>
      <el-table-column width="150px"
          label="操作">
        <!--       在列中插入按钮，使用scope.row进行获取当前行操作 -->
        <template slot-scope="scope">
          <el-button size="mini" type="success" round @click="do_edit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" round @click="do_delete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
        style="margin-top: 20px"
    >
    </el-pagination>

    <el-dialog
        title="学生信息操作"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form label-position="left" label-width="80px" :model="formData">
        <el-form-item label="课序号">
          <el-input v-model="formData.id" :disabled="theDisable"></el-input>
        </el-form-item>
        <el-form-item label="课程名">
          <el-input v-model="formData.courseName"></el-input>
        </el-form-item>
        <el-form-item label="教材">
          <el-input v-model="formData.book"></el-input>
        </el-form-item>
        <el-form-item label="教师">
          <el-select v-model="formData.teacher" placeholder="请选择">
            <el-option
                v-for="item in teacherList"
                :key="item.id"
                :label="item.teacherName"
                :value="item.id">
              <span style="float: left">{{ item.id }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.teacherName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学分">
          <!--          <el-input v-model="formData.age"></el-input>-->
          <el-input-number v-model="formData.credit" :min="1" :max="12" label="学分"></el-input-number>
        </el-form-item>
        <el-form-item label="课程信息">
          <el-input v-model="formData.courseInfo"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="do_cancel" style="margin-left: 160px">取 消</el-button>
      <el-button type="primary" size="mini" @click="save">保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {

  deleteCourseInfo,

  getCourseInfo, getSelectInfo,

  updateCourseInfo
} from "@/api/data";

export default {
  name: "StudentCourseInfo",
  data(){
    return{
      formData: {
        id: null,
        courseName: null,
        book: null,
        teacher: null,
        courseInfo:null,
        teacherName: null,
        credit:null,
      },
      creating:false,
      teacherList:[],
      theDisable:false,
      dialogVisible: false,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      tableData: {
        id: null,
        courseName: null,
        book: null,
        teacher:{
          id:null,
          teacherName:null,
        },
        courseInfo: null,
        credit:null,
      },
      queryData: {
        data: {
          currentPage: 1,
          id: null
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.$data.dialogVisible = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$data.queryData.currentPage = val
      //获取分页的数据
      this.queryData.data.currentPage = val
      getCourseInfo(this.$data.queryData).then(res => {
        this.tableData = res.data.tableData
        this.total = res.data.total
      })
    },
    do_query() {
      getCourseInfo(this.$data.queryData).then(res => {
        this.tableData = res.data.tableData
        this.total = res.data.total
        this.teacherList = res.data.teacherList
        console.log(this.teacherList)
      })
    },
    do_create() {
      this.$data.formData = {}
      this.$data.theDisable = false
      this.$data.dialogVisible = true
    },
    do_edit(data) {
      console.log(data)
      this.$data.theDisable = true
      this.$data.dialogVisible = true
      this.$data.formData = data
      this.$data.formData.teacher = data.teacher.id
      this.$data.formData.teacherName = data.teacher.teacherName
      this.do_query()
    },
    save() {
      let updateAndCreateData = {
        data: {
          formData: this.formData
        }
      }
      this.$data.dialogVisible = false
      console.log(updateAndCreateData);
      updateCourseInfo(updateAndCreateData).then(res => {
        this.$data.dialogVisible = false
        if (res.code === "0") {  //表示进行编辑操作
          this.$message({
            type: 'success',
            message: '更新成功！'
          })
          this.do_query()
        } else if (res.code === "1") {  //表示进行新增操作
          this.$message({
            type: "success",
            message: "添加成功！"
          })
          this.do_query()
        } else {
          this.$message({
            type: 'info',
            message: '操作失败！'
          })
        }

        this.$data.formData = {}  //清空form表单
      })
    },
    do_delete(theId) {
      this.$confirm('此操作将永久删除该课程！是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //用户点击确认按钮
        let deleteData = {
          data: {
            deleteId: theId
          }
        }
        deleteCourseInfo(deleteData).then(res => {
          //重新查询表格数据
          this.do_query()
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    do_cancel(){
      this.dialogVisible = false;
      this.do_query();
    },
  },
  mounted() {
    this.do_query();
    }
}
</script>

<style scoped>

</style>
